<!DOCTYPE html>
<html lang="en-US">

<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Meet Particle Dark, one of the Best Dark HTML Templates with Modern, Tech & Startup Style. See it live now!">
	<meta name="author" content="Skilltech Web Design">
	<meta name="keywords" content="particle, particles js html, particle html, dark html themes, dark html templates, dark website design, technology html, modern html, dark, theme, template, skilltech web design, creative html, animated html, portfolio html, skilltechwebdesign.com">

	<title>Volcano X</title>


	<!-- Bootstrap CSS -->
	<link href="static/css/bootstrap.min.css" rel="stylesheet">
	<!-- Fonts -->
	<link href="static/css/css2.css" rel="stylesheet">
	<!-- Icon Fonts -->
	<link href="static/css/icon.css" rel="stylesheet">
	<link href="static/css/font-awesome.min.css" rel="stylesheet">
	<!-- Animate.css -->
	<link href="static/css/animate.min.css" rel="stylesheet">
	<!-- Off Canvas Menu - Default Theme -->
	<link href="static/css/hc-offcanvas-nav.css" rel="stylesheet">
	<!-- Off Canvas Menu - Carbon Theme -->
	<!-- <link href="assets/css/vendor/hc-offcanvas-nav.css" rel="stylesheet" /> -->

	<!-- Particle Theme CSS -->
	<link href="static/css/particle-theme.css" rel="stylesheet">
	<link href="static/css/particle-colors.css" rel="stylesheet">

	<!-- Theme Preview Only CSS -->
	<link href="static/css/theme-preview-color-styler.css" rel="stylesheet">

	<!-- jQuery -->
	<script src="static/js/jquery.min.js"></script>
    <style>
		.color-styler-wrapper{
			display: none;
		}
		.particles-js-canvas-el{
			display: none;
		}
	</style>
</head>

<body class="pa-homepage pa-dark">

	<!-- Page Transitions
	================================================== -->
	<div class="pa-page-transition pa-page-transition-1 is-active"></div>
	<div class="pa-overlay" style="position: fixed; top: 0; left: 0; z-index: 10002; width: 100vw; height: 100vh; pointer-events: none; background: #091019;"></div>


	<!-- Navigation Menu
	================================================== -->
	<a class="pa-mobile-main-logo" href="#"><img alt="" src="static/picture/logo-normal.png"></a>

	<nav id="main-nav" class="pa-menu navbar pa-navbar navbar-expand-lg navbar-dark bg-transparent static-top">
        <span class="navbar-brand" style="margin-left: 60px;font-size: 30px;">Volcano X</span>
		<!-- Desktop Menu Logo -->
		<!-- <a class="navbar-brand" href="#"><img alt="" src="static/image/logo1.png"></a> -->

		<!-- The Menu -->
		<ul class="navbar-nav ml-auto">

			<!-- Mobile Menu Logo (only use if "close" buttons are set to false in JS) -->
			<!-- <li data-nav-custom-content="" class="custom-content pa-mobile-menu-logo"> 
				<a class="pa-mobile-navbar-brand" href="#"><img alt="" src="static/image/logo1.png"></a>
			</li> -->

			<!-- Regular Menu Items Start -->
			<li class="nav-item menu-item-has-children">
				<a class="nav-link hvr-underline-from-center" href="#">Investment Solution</a>
				<!-- <ul class="pa-submenu-ul">
					<li class="nav-item"><a class="nav-link" href="index.html">Home Light (<em>default</em>)</a></li>
					<li class="nav-item"><a class="nav-link" href="index-video.html">Home Light Video</a></li>
					<li class="nav-item"><a class="nav-link" href="index-yt-video.html">Home Light YT Video</a></li>
					<li class="nav-item"><a class="nav-link active" href="#">Home Dark</a></li>
					<li class="nav-item"><a class="nav-link" href="dark-index-video.html">Home Dark Video</a></li>
					<li class="nav-item"><a class="nav-link" href="dark-index-yt-video.html">Home Dark YT Video</a></li>
				</ul> -->
			</li>

			<li class="nav-item menu-item-has-children">
				<a class="nav-link hvr-underline-from-center" href="#">Research</a>
				<!-- <ul class="pa-submenu-ul">
					<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
					<li class="nav-item"><a class="nav-link" href="portfolio-item.html">Project Inner Page 1</a></li>
					<li class="nav-item"><a class="nav-link" href="portfolio-item.html">Project Inner Page 2</a></li>
					<li class="nav-item"><a class="nav-link" href="portfolio-item.html">Project Inner Page 3</a></li>
					<li class="nav-item"><a class="nav-link" href="portfolio-item.html">Project Inner Page 4</a></li>
				</ul> -->
			</li>

			<li class="nav-item">
				<a class="nav-link hvr-underline-from-center">Resource</a>
			</li>

			<li class="nav-item menu-item-has-children">
				<a class="nav-link hvr-underline-from-center" href="#">About</a> 
				<!-- <ul class="pa-submenu-ul">
					<li class="nav-item"><a class="nav-link" href="#services">All Services</a></li>
					<li class="nav-item"><a class="nav-link" href="service-item.html">Service Inner Page 1</a></li>
					<li class="nav-item"><a class="nav-link" href="service-item.html">Service Inner Page 2</a></li>
					<li class="nav-item"><a class="nav-link" href="service-item.html">Service Inner Page 3</a></li>
					<li class="nav-item"><a class="nav-link" href="service-item.html">Service Inner Page 4</a></li>
				</ul> -->
			</li>

			<li class="nav-item menu-item-has-children">
				<style>
                 .navbtn{
				  width: 129px;
				  height: 39px;
				  background: #FF5E21;
				  line-height: 39px;
				  color: #fff;
				  font-size: 16px;
				  text-align: center;
				  cursor: pointer;
				  margin-top: 9%;
				  position: relative;

				}
				.navbtn .flex{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.navbtn:after,.navbtn:before {
						content: 'Start Investing';
						position: absolute;
						left: 0;
						top: 0;
						width: 0;
						height: 100%;
						background: #555656;
						z-index:2;
						overflow: hidden;
						
                      }
					  .navbtn:hover{
						color: #fff;
					  }
					  .navbtn:hover:after{
					    transition: .3s;
						width: 100%;
					  }
				</style>
				<div class="navbtn">
					<div class="flex">
						Start Investing
					</div>
					</div>
				
			</li>

		

			
			

			<!-- Regular Menu Items End -->

			<!-- Mobile Menu Social Icons -->
			

		</ul>
	</nav>
	<!-- /.pa-menu -->
	<!-- Hero Section
	================================================== -->
	<section id="top" class="pa-hero pa-centered-section pa-full-height pa-image-back pushable-content">
		<!-- <div class="videowrap" style="position: absolute;left:0;width: 100vw;height: 100vh;">
			 <video autoplay loop style="object-fit: fill;width: 100vw;height: 100vh;" muted src="./static/image/222.mp4"></video>
		</div> -->

		<div class="pa-absolute-fill pa-gradient-back-v1">
			<!-- <div class="videowrap" style="position: absolute;left:0;width: 100vw;height: 100vh;">
				<video autoplay loop style="object-fit: fill;width: 100vw;height: 100%;" muted src="./static/image/222.mp4"></video>
		   </div> -->
		</div><!-- Increase opacity to overlay hero with a gradient -->
		<div id="particles-js" style="top: 20px;">
			<video autoplay loop muted style="object-fit: fill;width: 100%;"    src="http://clouddn-oss-prod.asaplus.com.cn/lotkRazkqAweJwFK7KXI_LMBOPK4"></video>
		</div>
		 <div class="container pa-hero-content text-center" style="width: 100%;height: 100%;position:absolute;left: 0;right: 0;margin-left: auto;margin-right: auto;z-index: 10;top:45%;">
			<!-- <div class="row pa-hero-typed-text">
				<div class="col-12">
					<div class="typed-text mega-typed">
						<span class="animated-text-effect">
						
						</span>
					</div>
				</div>
			</div> -->
			<style>
				.yangani{
					-webkit-animation-name: bounceInLeft;
                    animation-name: bounceInLeft;
					animation-duration: 1s;
					animation-fill-mode: both;
					animation-delay:3.5s;
				}
				@keyframes bounceInLeft {
							from,
							60%,
							75%,
							90%,
							to {
								-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
								animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
							}
							0% {
								opacity: 0;
								-webkit-transform: translate3d(-3000px, 0, 0);
								transform: translate3d(-3000px, 0, 0);
							}
							60% {
								opacity: 1;
								-webkit-transform: translate3d(25px, 0, 0);
								transform: translate3d(25px, 0, 0);
							}
							75% {
								-webkit-transform: translate3d(-10px, 0, 0);
								transform: translate3d(-10px, 0, 0);
							}
							90% {
								-webkit-transform: translate3d(5px, 0, 0);
								transform: translate3d(5px, 0, 0);
							}
							to {
								-webkit-transform: none;
								transform: none;
							}
							}
			</style>
			<div class="row">
				<div class="col-12" style="max-width: 976px; margin: 0 auto;">
					<h2 class="pa-h2-v2-hero-subhead pa-white animated bounceInLeft yangani" style="font-size:70px;line-height: 1;">Invest in the Rhythm of<br>the Futurethe Future</h2>
				</div>
			</div>
			<div class="row">
				<div class="col-12" style="max-width: 976px; margin: 0 auto;">
					<h2 class="pa-h2-v2-hero-subhead pa-white yangani" style="font-size: 24px;line-height: 1;">Ride the wave of tech evolution with VolcanoX and partake in the wealth feast<br> of tomorrow's crypto markets. Your future, invested</h2>
				</div>
			</div>
			<style>
				.btn-wrap{
                  width: 100%;

				}
				.btn.btn1{
				  width: 255px;
				  height: 79px;
				  background: #FF5E21;
				  line-height: 79px;
				  color: #fff;
				  font-size: 16px;
				  text-align: center;
				  cursor: pointer;
				  position: relative;
				  box-sizing: border-box;

				}	
				.btn .flex{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.btn.btn1:after,.btn.btn1:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 0%;
						overflow: hidden;
						height: 100%;
						background: #555656;
						z-index:2;
						text-align: center;
						
                      }
					  .btn1.btn:hover{
						color: #fff;
						border:1px #555656 solid;
						
					  }
					  .btn.btn1:nth-of-type(1)::after{
						content: "Explore All Products.";
					  }
					  .btn.btn1:nth-of-type(2)::after{
						content: "Start lnvesting.";
					  }
					  .btn.btn1:hover:after{
					    transition: .3s;
						width: 100%;
					  }
				
			</style>
			<div class="row">
				<div class="col-12" style="max-width: 976px; margin: 0 auto;">
                 <div class="btn-wrap">
					<div class="btn btn1" style="margin-right: 20px;">
						<div class="flex">
							Explore All Products.
						</div>
						</div>
					<div class="btn btn1">
						<div class="flex">
						 Start lnvesting.
					    </div>
					</div>
				 </div>
				</div>
			</div>
		</div>

	</section>
	<!-- /.pa-hero -->


	<!-- CTA Section
	================================================== -->
	<section class="pa-cta-v1" style="padding:190px 0 120px;display: none;"  data-parallax="scroll" data-speed="0.2" data-image-src="assets/images/ces.png">
		<div class="container">
			<h1 class="pa-h1-v1 pa-bright fadeInLeftDelay03Duration10" style="color: #000000;
			margin-top: 20px;">The Latest from Volcano X</h1>
			<div class="infowrap" style="margin-top: 30px;overflow: hidden;">
				 <div class="imgwrap" style="width: 35%;float: left;" >
					<img src="static/image/ce2.png"/>
				 </div>
				 <div class="infotextwrap" style="float: left;margin-left: 100px;width: 50%;">
					<h1 style="color:#111010;line-height: 1;">Be Part of the Money Revolution,  Crypto ETFs are Inevitable.</h1>
					<h1 style="color:#000;font-size: 16px;margin-top: 20px;">In the swirling currents of financial innovation, a new tide is rising—one that promises to redefine wealth, investment, and market dynamics.......</h1>
					<style>
				       .btn2{
						width: 276px;
						height: 79px;
						line-height: 79px;
						text-align: center;
		               }
					  .btn2{
						background: transparent;
						border: 1px solid #FF5E21;
						color: #FF5E21;
						margin-top: 20px;
						box-sizing: border-box;
						cursor: pointer;
						position: relative;
					  }
					  .btn2:after,.btn2:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 0;
						height: 100%;
						background: #FF5E21;
						z-index:-2;
						
                      }
					  .btn2:hover{
						color: #fff;
					  }
					  .btn2:hover:after{
					    transition: .3s;
						width: 100%;
					  }
					</style>
					<div class="btn btn2">
						<div class="flex">
							Perspective  in  2024
						</div>
					</div>
				 </div>


			</div>

		</div>

	</section>
	<!-- /.pa-hero -->


	<!-- CTA Section
	================================================== -->
	<section class="pa-cta-v1" style="padding:120px 0;display: none;"  data-parallax="scroll" data-speed="0.2" data-image-src="assets/images/ces.png">
		<div class="container">
			<h1 class="pa-h1-v1 pa-bright fadeInLeftDelay03Duration10" style="color: #000000;
			;">The Latest from Volcano X</h1>
			<div class="infowrap" style="margin-top: 30px;overflow: hidden;">
				 <div class="imgwrap" style="width: 35%;float: left;" >
					<img src="static/image/ce2.png"/>
				 </div>
				 <div class="infotextwrap" style="float: left;margin-left: 100px;width: 50%;">
					<h1 style="color:#111010;line-height: 1;">Be Part of the Money Revolution,  Crypto ETFs are Inevitable.</h1>
					<h1 style="color:#000;font-size: 16px;margin-top: 20px;">In the swirling currents of financial innovation, a new tide is rising—one that promises to redefine wealth, investment, and market dynamics.......</h1>
					<style>
					  .btn2{
						background: transparent;
						border: 1px solid #FF5E21;
						color: #FF5E21;
						margin-top: 20px;
						box-sizing: border-box;
						cursor: pointer;
						position: relative;
					  }
					  .btn:after,.btn:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 0;
						height: 100%;
						background: #FF5E21;
						z-index:-2;
						border-radius: 4px;
                      }
					  .btn2:hover{
						color: #fff;
					  }
					  .btn2:hover:after{
					    transition: .3s;
						width: 100%;
					  }
					</style>
					<div class="btn btn2">
						<div class="flex">
							Perspective  in  2024
						</div>
					</div>
				 </div>


			</div>

		</div>

	</section>
	<section style="padding:120px 0;display: none;" class="pa-cta-v1" data-parallax="scroll" data-speed="0.2" data-image-src="assets/images/ce3.png">
		<div class="container">
			<h1 class="pa-h1-v1 pa-bright fadeInLeftDelay03Duration10" style="color: #fff;width: 60%;">Gateway to Future Technology <br>Investments</h1>
			<h1 class="fadeInLeftDelay03Duration10" style="color:#fff;font-size: 16px;margin-top: 20px;width: 60%;">Broaden your horizons with our extensive selection of crypto ETFs. Whether you're interested in Bitcoin or a wider array of digital assets, X-Shares is the nexus for modern cryptocurrency investing. With products crafted for clarity and performance, enter the market confidently.</h1>
			<div class="btn btn2" style="background: #FF5E21;color: #fff;">
				<div class="flex">
					View Public Quotations
				</div>
			</div>
			<style>
				.newinfo{
					width: 100%;
					display: flex;
					justify-content:space-between;
					margin-top: 80px;
				}
				.circle{
					width: 125px;
					height: 125px;
					border-radius: 50%;
					background: #FF5E21;
					display: inline-block;
					line-height: 125px;
					color: #fff;
					font-size: 40px;
					text-align: center;
				}
				.newtext{
					display: inline-block;
					margin-left: 20px;
				}
				.title1{
					color: #fff;
					font-size: 40px;
				}
				.title2{
					color: #fff;
					font-size: 20px;
				}
				.smallbtn{
					width: 114px;
					height: 33px;
					background: transparent;
						border: 1px solid #FF5E21;
						color: #FF5E21;
						top: 30px;
						box-sizing: border-box;
						cursor: pointer;
						position: relative;
						text-align: center;
				}
				.smallbtn:after,.smallbtn:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 0;
						height: 100%;
						background: #FF5E21;
						z-index:-2;
						border-radius: 4px;
                      }
					  .smallbtn:hover{
						color: #fff;
					  }
					  .smallbtn:hover:after{
					    transition: .3s;
						width: 100%;
					  }
			</style>
			<div class="newinfo">
				 <div class="newitem">
					<div class="circle">xCVPI</div>
					<div class="newtext">
					  <div class="title1" style="line-height: 1;">xCVPI</div>
					  <div class="title2">Crypto Vault Pool Index  </div>
					  <div class="smallbtn">View Detials</div>
					</div>
				 </div>
				 <div class="newitem">
					<div class="circle">xBRC</div>
					<div class="newtext">
					  <div class="title1" style="line-height: 1;">xBRC</div>
					  <div class="title2">Bitcoin Emerging Eco</div>
					  <div class="smallbtn">View Detials</div>
					</div>
				 </div>
				 <div class="newitem">
					<div class="circle">xFTS</div>
					<div class="newtext">
					  <div class="title1" style="line-height: 1;">xCVPI</div>
					  <div class="title2">Web3 Future Tech Shares</div>
					  <div class="smallbtn">View Detials</div>
					</div>
				 </div>

			</div>
		</div>

	</section>
	<!-- /.pa-cta-v1 -->


	<!-- Portfolio Section
	================================================== -->
	<section style="display: none;" id="portfolio" class="pa-portfolio" style="display: none;">
		<!-- Portfolio header -->
		<div class="container-fluid text-center p-0">
			<div class="row m-0">
				<div class="col-12 p-0">
					<div class="pa-stripe-heading" >
						<h1 class="pa-h1-v1 pa-bright fadeInLeftDelay03Duration10"><strong>See our work</strong></h1>
					</div>
					<div class="pa-stripe-subheading">
						<p class="pa-p-v2 pa-bright fadeInLeftDelay03Duration10">The new Style for 2022 is here. Like it? <a href="javascript:;" target="_blank">BUY THEME NOW!</a></p>
					</div>	
				</div>
			</div>
		</div>
		<!-- Portfolio thumbnails -->
		<div class="container-fluid">
			<div class="row pa-row-max2560">
				<div class="col-12 col-sm-6 col-lg-3 p-0">
					<div class="pa-portfolio-thumb m-0 text-center fadeInDelay00Duration10" style="background-image: url(static/image/portfolio-thumbnail-01-dark.jpg);">
						<div class="pa-portfolio-thumb-background-overlay"></div>
						<div class="pa-portfolio-thumb-deco-1"></div>
						<div class="pa-portfolio-thumb-deco-2"></div>
						<div class="pa-portfolio-thumb-centered-content w-100">
							<a href="portfolio-item.html" class="pa-portfolio-thumb-icon-link">
								<span class="pa-portfolio-thumb-hover-icon"><i class="fa fa-eye"></i></span>
							</a>
							<a href="portfolio-item.html">
								<h4 class="pa-portfolio-thumb-heading">Amazing Hover Effect</h4>
							</a>
							<p class="pa-portfolio-thumb-desc">Pure CSS Instant Hover</p>
						</div>
					</div>
				</div>
				<div class="col-12 col-sm-6 col-lg-3 p-0">
					<div class="pa-portfolio-thumb m-0 text-center fadeInDelay00Duration10" style="background-image: url(static/image/portfolio-thumbnail-02-dark.jpg);">
						<div class="pa-portfolio-thumb-background-overlay"></div>
						<div class="pa-portfolio-thumb-deco-1"></div>
						<div class="pa-portfolio-thumb-deco-2"></div>
						<div class="pa-portfolio-thumb-centered-content w-100">
							<a href="portfolio-item.html" class="pa-portfolio-thumb-icon-link">
								<span class="pa-portfolio-thumb-hover-icon"><i class="fa fa-eye"></i></span>
							</a>
							<a href="portfolio-item.html">
								<h4 class="pa-portfolio-thumb-heading">Superb Image Styles</h4>
							</a>
							<p class="pa-portfolio-thumb-desc">Pure CSS Instant Hover</p>
						</div>
					</div>
				</div>
				<div class="col-12 col-sm-6 col-lg-3 p-0">
					<div class="pa-portfolio-thumb m-0 text-center fadeInDelay00Duration10" style="background-image: url(static/image/portfolio-thumbnail-03-dark.jpg);">
						<div class="pa-portfolio-thumb-background-overlay"></div>
						<div class="pa-portfolio-thumb-deco-1"></div>
						<div class="pa-portfolio-thumb-deco-2"></div>
						<div class="pa-portfolio-thumb-centered-content w-100">
							<a href="portfolio-item.html" class="pa-portfolio-thumb-icon-link">
								<span class="pa-portfolio-thumb-hover-icon"><i class="fa fa-eye"></i></span>
							</a>
							<a href="portfolio-item.html">
								<h4 class="pa-portfolio-thumb-heading">Particle Design Theme</h4>
							</a>
							<p class="pa-portfolio-thumb-desc">Pure CSS Instant Hover</p>
						</div>
					</div>
				</div>
				<div class="col-12 col-sm-6 col-lg-3 p-0">
					<div class="pa-portfolio-thumb m-0 text-center fadeInDelay00Duration10" style="background-image: url(static/image/portfolio-thumbnail-04-dark.jpg);">
						<div class="pa-portfolio-thumb-background-overlay"></div>
						<div class="pa-portfolio-thumb-deco-1"></div>
						<div class="pa-portfolio-thumb-deco-2"></div>
						<div class="pa-portfolio-thumb-centered-content w-100">
							<a href="portfolio-item.html" class="pa-portfolio-thumb-icon-link">
								<span class="pa-portfolio-thumb-hover-icon"><i class="fa fa-eye"></i></span>
							</a>
							<a href="portfolio-item.html">
								<h4 class="pa-portfolio-thumb-heading">Thumb Hover Superb</h4>
							</a>
							<p class="pa-portfolio-thumb-desc">Pure CSS Instant Hover</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- /.pa-portfolio -->


	<!-- About Us Section
	================================================== -->
	<section id="about-us" style="display: none;" class="pa-about-us pa-standard-section text-center pa-dark">

		<div class="container">
			<!-- Section Header -->
			<div class="row">
				<div class="col-12 col-xl-10 offset-xl-1">

					<h1 class="pa-h1-v2 pa-bright fadeInDelay00Duration10"><strong>About</strong> Particle Company</h1>
					<p class="pa-p-v1 pa-bright fadeInDelay03Duration10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
				
				</div>
			</div>
			<div class="row">
				<!-- Icon list (no column) -->
				<ul class="pa-icon-list-horizontal-dark">
					<li>
						<span class="pa-icon-list-icon fadeInDelay03Duration10"><i class="material-icons">beenhere</i></span>
						<p class="pa-icon-list-text pa-p-v1 pa-bright fadeInDelay03Duration10">Super fast & reliable</p>
					</li>
					<li>
						<span class="pa-icon-list-icon fadeInDelay06Duration10"><i class="material-icons">comment</i></span>
						<p class="pa-icon-list-text pa-p-v1 pa-bright fadeInDelay06Duration10">24 Hour Support</p>
					</li>
					<li>
						<span class="pa-icon-list-icon fadeInDelay10Duration10"><i class="material-icons">insert_chart</i></span>
						<p class="pa-icon-list-text pa-p-v1 pa-bright fadeInDelay10Duration10">We Get the Results</p>
					</li>
				</ul>
			</div>
			<!-- Bottom Images -->
			<div class="row">
				<div class="col-12 pa-about-us-bottom-images">
					<img alt="" class="pa-about-img-left fadeInRight--Custom" src="static/picture/ipads-left.png">
					<img alt="" class="pa-about-img-center slideup" src="static/picture/ipads-center.png">
					<img alt="" class="pa-about-img-right fadeInLeft--Custom" src="static/picture/ipads-right.png">
				</div>
			</div>
		</div>

	</section>
	<!-- /.pa-about-us -->


	<!-- Stripe Tagline Section
	================================================== -->
	<section class="pa-stripe-tagline" style="display: none;">
		<div class="container-fluid text-center p-0">
			<div class="row m-0">
				<div class="col-12 p-0">
					<div class="pa-stripe-heading py-2 py-sm-4">
						<h5 class="pa-h5-v1 pa-bright pt-4 pb-1 mb-4 fadeInDelay03Duration10">We are here to <strong>make things Better</strong></h5>
					</div>
				</div>
			</div>
		</div>

	</section>
	<!-- /.pa-stripe-tagline -->


	<!-- Quote Section
	================================================== -->
	<section class="pa-quote" data-parallax="scroll" data-speed="0.2" style="display: none;" data-image-src="assets/images/quote-background.jpg" style="position: relative; z-index: 2;">

		<div class="container text-center">
			<div class="row">
				<div class="col-12 col-xl-10 offset-xl-1">
					<h2 class="pa-h2-quote pa-bright fadeInDelay03Duration10"><q>Patience, persistence and perspiration make an unbeatable combination for <strong>success</strong>.</q></h2>
					<p class="pa-quote-author pa-bright fadeInDelay03Duration10">Napoleon Hill<span class="pa-author-role">&nbsp;- Author</span></p>
				</div>
			</div>
		</div>

	</section>
	<!-- /.pa-quote -->


	<!-- Services (What We Do) Section
	================================================== -->
	<section id="services" style="display: none;" class="pa-what-we-do pa-standard-section text-center">

		<div class="container">
			<!-- Section Header -->
			<div class="row">
				<div class="col-12 col-xl-10 offset-xl-1">

					<h1 class="pa-h1-v2 pa-bright fadeInDelay00Duration10">What We do, We do <strong>Best!</strong></h1>
					<p class="pa-p-v1 pa-bright fadeInDelay03Duration10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
				
				</div>
			</div>
			<!-- Services with phone section -->
			<div class="row pa-services text-center">
				<div class="col-12 col-sm-10 offset-sm-1 col-md-4 offset-md-0 offset-lg-0 col-lg-4 order-2 order-md-1 text-center">
					<ul class="pa-services-ul pa-right text-md-right text-left">
						<li>
							<a href="service-item.html">
								<span class="pa-serv-list-icon fadeInDelay03Duration10"><i class="material-icons">create</i></span>
								<h3 class="pa-h3-v1 pa-bright fadeInDelay03Duration10">Graphic Design</h3>
								<p class="pa-p-v1 pa-bright fadeInDelay03Duration10">Lorem ipsum dolor sit amet, consecte adipiscing elit. Integer nec odio.</p>
							</a>
						</li>
						<li>
							<a href="service-item.html">
								<span class="pa-serv-list-icon fadeInDelay06Duration10"><i class="material-icons">screen_share</i></span>
								<h3 class="pa-h3-v1 pa-bright fadeInDelay06Duration10">Web Design</h3>
								<p class="pa-p-v1 pa-bright fadeInDelay06Duration10">Lorem ipsum dolor sit amet, consecte adipiscing elit. Integer nec odio.</p>
							</a>
						</li>
						<li>
							<a href="service-item.html">
								<span class="pa-serv-list-icon fadeInDelay10Duration10"><i class="material-icons">phonelink</i></span>
								<h3 class="pa-h3-v1 pa-bright fadeInDelay10Duration10">Social Media</h3>
								<p class="pa-p-v1 pa-bright fadeInDelay10Duration10">Lorem ipsum dolor sit amet, consecte adipiscing elit. Integer nec odio.</p>
							</a>
						</li>
					</ul>
				</div>
				<div class="col-12 col-md-4 order-1 order-md-2">
					<img alt="" class="pa-services-image" src="static/picture/iphone-services.png">
				</div>
				<div class="col-12 col-sm-10 offset-sm-1 col-md-4 offset-md-0 offset-lg-0 col-lg-4 order-3 order-md-3 text-center">
					<ul class="pa-services-ul pa-left text-left">
						<li>
							<a href="service-item.html">
								<span class="pa-serv-list-icon fadeInDelay03Duration10"><i class="material-icons">linked_camera</i></span>
								<h3 class="pa-h3-v1 pa-bright fadeInDelay03Duration10">Photography</h3>
								<p class="pa-p-v1 pa-bright fadeInDelay03Duration10">Lorem ipsum dolor sit amet, consecte adipiscing elit. Integer nec odio.</p>
							</a>
						</li>
						<li>
							<a href="service-item.html">
								<span class="pa-serv-list-icon fadeInDelay06Duration10"><i class="material-icons">mic</i></span>
								<h3 class="pa-h3-v1 pa-bright fadeInDelay06Duration10">Marketing</h3>
								<p class="pa-p-v1 pa-bright fadeInDelay06Duration10">Lorem ipsum dolor sit amet, consecte adipiscing elit. Integer nec odio.</p>
							</a>
						</li>
						<li>
							<a href="service-item.html">
								<span class="pa-serv-list-icon fadeInDelay10Duration10"><i class="material-icons">play_circle_filled</i></span>
								<h3 class="pa-h3-v1 pa-bright fadeInDelay10Duration10">Video Production</h3>
								<p class="pa-p-v1 pa-bright fadeInDelay10Duration10">Lorem ipsum dolor sit amet, consecte adipiscing elit. Integer nec odio.</p>
							</a>
						</li>
					</ul>
				</div>
			</div>

		</div>

	</section>
	<!-- /.pa-what-we-do -->


	<!-- Second CTA Section
	================================================== -->
	<section class="pa-cta-v2 pa-centered-section pa-image-back" style="background-image: url(static/image/low-poly.jpg);display: none;">

		<div class="pa-absolute-fill pa-gradient-back-v1"></div>

		<div class="container">
			<div class="row">
				<div class="col-12 col-xl-10 offset-xl-1 text-center">
					<h1 class="pa-h1-v2 pa-bright fadeInDelay00Duration10">Like what You see? <strong>Get Particle</strong> Now!</h1>
					<p class="pa-p-v1 pa-white fadeInDelay03Duration10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
					<a class="pa-button-secondary pa-hvr-sweep-to-right fadeInRightDelay11Duration10" href="javascript:;" target="_blank">Get it Now</a>
				</div>
			</div>
		</div>

	</section>
	<!-- /.pa-cta-v2 -->


	<!-- Skills Section
	================================================== -->
	<section id="skills" class="pa-skills" style="display: none;">

		<div class="container">
			<!-- Section Header -->
			<div class="row">
				<div class="col-12 col-xl-10 offset-xl-1 text-center">
					<h5 class="pa-h1-v3 pa-bright pt-4 pb-1 mb-4 fadeInDelay03Duration10">Let <strong>Our Skills</strong> speak for Us</h5>
					<p class="pa-p-v1 pa-bright fadeInDelay03Duration10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
				</div>
			</div>

			<div class="row pa-skills-row">
				<div class="col-12">
					<div class="pa-skill-warp">
						<p class="pa-skill-name pa-skill-el">Adobe Creative Cloud</p>
						<div class="pa-skill-area pa-skill-el">
							<div class="pa-skill-bar progressBar" style="width: 75%;"></div>
						</div>
						<p class="pa-skill-number pa-skill-el"><span class="pa-counterskills">75</span><span class="fadeInDelay10Duration10">%</span></p>
					</div>
					<div class="pa-skill-warp">
						<p class="pa-skill-name pa-skill-el">Wordpress</p>
						<div class="pa-skill-area pa-skill-el">
							<div class="pa-skill-bar progressBar" style="width: 80%;"></div>
						</div>
						<p class="pa-skill-number pa-skill-el"><span class="pa-counterskills">80</span><span class="fadeInDelay10Duration10">%</span></p>
					</div>
					<div class="pa-skill-warp">
						<p class="pa-skill-name pa-skill-el">Drupal</p>
						<div class="pa-skill-area pa-skill-el">
							<div class="pa-skill-bar progressBar" style="width: 50%;"></div>
						</div>
						<p class="pa-skill-number pa-skill-el"><span class="pa-counterskills">50</span><span class="fadeInDelay10Duration10">%</span></p>
					</div>
					<div class="pa-skill-warp">
						<p class="pa-skill-name pa-skill-el">Graphic Design</p>
						<div class="pa-skill-area pa-skill-el">
							<div class="pa-skill-bar progressBar" style="width: 70%;"></div>
						</div>
						<p class="pa-skill-number pa-skill-el"><span class="pa-counterskills">70</span><span class="fadeInDelay10Duration10">%</span></p>
					</div>
					<div class="pa-skill-warp">
						<p class="pa-skill-name pa-skill-el">HTML / CSS / JAVASCRIPT</p>
						<div class="pa-skill-area pa-skill-el">
							<div class="pa-skill-bar progressBar" style="width: 60%;"></div>
						</div>
						<p class="pa-skill-number pa-skill-el"><span class="pa-counterskills">60</span><span class="fadeInDelay10Duration10">%</span></p>
					</div>
				</div>
			</div>
			
		</div>

	</section>
	<!-- /.pa-skills -->


	<!-- Contact Us Section
	================================================== -->
	<section style="display:none;" id="contact-us" class="pa-contact-us" data-parallax="scroll" data-speed="0" data-image-src="assets/images/contact-hero.jpg">

		<div class="container">
		
			<div class="row text-center">
				<div class="col-12 col-xl-10 offset-xl-1">
					<h1 class="pa-h1-v2 pa-bright fadeInDelay00Duration10">Let's <strong>Connect</strong></h1>
					<p class="pa-p-v1 pa-white fadeInDelay03Duration10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
					<div class="pt-0 pt-sm-3 pt-md-3 pt-lg-4 pt-xl-5"></div>
				</div>
			</div>
			<div class="row">
			
				<div class="col-12 col-md-6 col-xl-5 offset-xl-1 pa-contact-info d-flex">
					<div class="pa-glass pa-left">
						<h1 class="pa-h1-v3 pa-bright fadeInDelay03Duration10">Our office <strong>info</strong></h1>
						<p class="pa-p-v1 pa-white fadeInDelay03Duration10"><span><i class="material-icons">mail_outline</i></span>particle@yoursite.com</p>
						<p class="pa-p-v1 pa-white fadeInDelay06Duration10"><span><i class="material-icons">call</i></span>+381 (0) 21 555 4597</p>
						<p class="pa-p-v1 pa-white fadeInDelay10Duration10"><span><i class="material-icons">business</i></span>555 Downing st. Suite 1000</p>
						<p class="pa-p-v1 pa-white fadeInDelay10Duration10"><span><i class="material-icons">location_on</i></span>New York, NY 10010</p>
						<div class="pa-social-section">
							<h1 class="pa-h1-v3 pa-bright fadeInDelay03Duration10"><strong>Connect</strong> with us</h1>
							<a class="pa-social-icons" href="javascript:;" target="_blank"><span class="fadeInDelay03Duration10"><i class="fa fa-facebook"></i></span></a>
							<a class="pa-social-icons" href="javascript:;" target="_blank"><span class="fadeInDelay03Duration10"><i class="fa fa-behance"></i></span></a>
							<a class="pa-social-icons" href="javascript:;" target="_blank"><span class="fadeInDelay03Duration10"><i class="fa fa-dribbble"></i></span></a>
							<a class="pa-social-icons" href="javascript:;" target="_blank"><span class="fadeInDelay03Duration10"><i class="fa fa-instagram"></i></span></a>
							<p class="pa-p-v1 pa-white pa-contact-lastline fadeInDelay03Duration10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</div>
				</div>
				
				<div class="col-12 col-md-6 col-xl-5 pa-contact-form d-flex justify-content-end">
					<div class="pa-glass pa-right">
						<h1 class="pa-h1-v3 pa-bright fadeInDelay03Duration10">Send us a <strong>Message</strong></h1>

						<!-- Preview Only Static Form -->
						<form>
							<div class="form-group">
								<label for="the_name">Name</label>
								<input type="text" name="the_name" tabindex="1">
							</div>
							<div class="form-group">
								<label for="the_email">Email</label>
								<input type="email" name="the_email" tabindex="2">
							</div>
							<div class="form-group">
								<label for="the_message">Message</label>
								<textarea name="the_message" tabindex="3"></textarea>
							</div>
							<button type="submit" class="pa-hvr-sweep-to-right" tabindex="4">Submit</button>
						</form>

					</div>
				</div>
			</div>
		</div>

	</section>
	<!-- /.pa-menu -->


	<!-- Footer
	================================================== -->
	<!-- <footer>
		<div class="container">
			<div class="row">
				<div class="col-12 text-center my-2 pt-5 pb-4">
					<p>Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://www.moyublog.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				</div>
			</div>
		</div>
		<div class="pa-back-to-top-wrap">
			<a class="pa-back-to-top" href="#top"><span class="pa-back-to-top"></span></a>
		</div>
	</footer> -->


	<!-- Helper div for inserting before scripts
	================================================== -->
	<div class="pa-body-end"></div>


	<!-- Scripts / Body End
	================================================== -->
	<!-- Vendor Scripts -->
	<script src="static/js/jquery-migrate.min.js"></script>
	<script src="static/js/bootstrap.min.js"></script>
	<script src="static/js/hc-offcanvas-nav.js"></script>
	<script src="static/js/parallax.min.js"></script>
	<script src="static/js/jquery.easing.min.js"></script>
	<script src="static/js/typed.min.js"></script>
	<script src="static/js/wow.min.js"></script>
	<script src="static/js/particles.min.js"></script>
	<script src="static/js/waypoints.min.js"></script>
	<script src="static/js/jquery.counterup.min.js"></script>

	

	<!-- Theme Scripts and Inits -->
	<script src="static/js/particle-theme.js"></script>
	<script src="static/js/page-home-dark.js"></script>

	<!-- Theme Preview Only Scripts -->
	<script src="static/js/spectrum.min.js"></script>
	<script src="static/js/clipboard.min.js"></script>
	<script src="static/js/theme-preview-only.js"></script>

	<!-- Theme Preview Only CSS -->
	<link href="static/css/spectrum.min.css" rel="stylesheet">

</body>

</html>